// 主题色枚举
$themes: (
  dark: (
    background-color: #C7D1CD,
    header-color: rgba($color: #000, $alpha: 0.25),
    button-color: rgba($color: purple, $alpha: 0.25),
  ),
  light: (
    background-color: rgba($color: pink, $alpha: 0.25),
    button-color: #581C26,
    header-color: #fd98ad,
  )
);
// 混淆 -- 获取主题色枚举配置对应样式
@mixin get-theme ($themeclass, $data) {
  // 循环获取主题色枚举
  @each $themename, $theme in $themes {
    [data-theme='#{$themename}'] & {
      #{$themeclass}: map-get($map: $theme, $key: $data);
    }
  }
}

// 使用
.header {
  width: 100%;
  height: 60px;
  @include get-theme('background-color', 'header-color');
}
.main {
  width: 100%;
  height: 200px;
  @include get-theme('color', 'button-color');
}
.bottom {
  width: 100%;
  height: 60px;
  @include get-theme('background-color', 'background-color');
}